var React = require('react');
var NavLink = require('./NavLink');

var About = React.createClass({
	getDefaultProps:function(){
		return {
			url:'http://localhost:3000/db'
		}
	},
	getInitialState:function(){
		return {
			list:[],
			iptList:[]
		}
	},
	componentWillMount:function(){
		var _this = this;
		$.ajax({url:this.props.url}).then(function(res){
			_this.setState({
				list: res.subjects
			})
		})
	},
	check:function(){
		var iptValue = this.refs.ipt.value
		if (iptValue.length == 0) {
			alert("请输入电影名");
			return;
		}else{
		console.log(iptValue)
		var iptList = [];
		for(var i = 0 ,iptlen=iptValue.length;i<iptlen;i++){
			iptList.push(iptValue.slice(i,i+1))
		}
		this.setState({
			iptList:iptList
		})
		}
	},
	render:function(){
		if (this.state.iptList.length !== 0) {
			var lst1 = [];
			var data1=this.state.iptList;
			var listLen1 = data1.length;
			var listT=[];
			for(var i = 0; i < listLen1;i++){
				for(var j = 0,lens=this.state.list.length ; j<lens;j++ ){
					for(var a = 0 ;a<this.state.list[i].title.length;a++){
						if(this.state.list[j].title.slice(a,a+1) == data1[i]){

							listT.push(this.state.list[j]);
						}
					}
					
				}
				
			}
			console.log(listT)
			var unique = {};
			listT.forEach(function(gpa){ unique[ JSON.stringify(gpa) ] = gpa });
			listT = Object.keys(unique).map(function(u){return JSON.parse(u) });
					
			console.log(listT)
			if (listT.length == 0) {
				lst1.push(
					<h1>没有相关信息的电影</h1>	
				)
			}else{
			for(var i =0;i<listT.length;i++){
				
				var detailUrl = "/detail/" + listT[i].id;
				lst1.push(
					<div className="col-lg-4" key={i}>
			          <img className="img-circle" 
			          src={listT[i].images.medium} 
			          alt="Generic placeholder image" width="140" height="140"/>
			          <h2>{listT[i].title}</h2>
			          <p>{listT[i].summary}</p>
			          <p>
			          <NavLink to={detailUrl} className="btn btn-default" role="button">
			         	View details &raquo;</NavLink></p>
			        </div>
				)
			}
				
			}	
		}
	
		if(this.state.list.length>0){
			var lst = [];
			var data = this.state.list;
			var listLen = data.length;

			for(var i =0;i<listLen;i++){
				
				var detailUrl = "/detail/" + data[i].id;
				lst.push(
					<div className="col-lg-4" key={i}>
			          <img className="img-circle" 
			          src={data[i].images.medium} 
			          alt="Generic placeholder image" width="140" height="140"/>
			          <h2>{data[i].title}</h2>
			          <p>{data[i].summary}</p>
			          <p>
			          <NavLink to={detailUrl} className="btn btn-default" role="button">
			         	View details &raquo;</NavLink></p>
			        </div>
				)
			}

		}
		
		var h1=<h1>推介电影</h1>
		return (
			<div>
			<input type="text" ref="ipt" placeholder="请输入搜索内容"/> <span onClick={this.check}>搜索</span>
			<div className="container marketing">
				<div className="row">
		       	 {lst1}
		        </div>
			  {h1}

		      <div className="row">
		        {lst}
		      </div>
			</div>
			</div>
		)
	}
});

module.exports = About;